<template>
  <div>
    <el-menu
      :router="true"
      mode="vertical"
      class="el-menu-vertical-demo jgmenu"
      :default-active="activeId"
      :default-openeds="openIndex"
    >
      <el-submenu
        v-for="(group, i) in list"
        :key="i"
        :index="i.toString()"
        class="jgsubmenu"
      >
        <template slot="title">
          <span>{{ group.modname }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="(item, a) in group.menulist"
            :index="item.subroutername"
            :key="a"
            :disabled="item.disabled"
          >
            <span slot="title">{{ item.modname }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      activeId: "", //当前的选中
      openIndex: [], // 默认全部展开所有子菜单
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        // console.log(val.name);
        this.activeId = this.$self.findNodeById(
          JSON.parse(JSON.stringify(this.list)),
          val.name
        );
        // console.log(a);
        // console.log(this.activeId);
      },

      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    this.menuactive();
    //路由跳转
    // console.log(this.$route.name);
    // this.activeId = this.$route.name;
    this.activeId = this.$self.findNodeById(
      JSON.parse(JSON.stringify(this.list)),
      this.$route.name
    );
    // console.log(this.activeId,JSON.parse(JSON.stringify(this.list)));
  },
  methods: {
    /**
     * 默认展开
     */
    menuactive() {
      for (let i = 0; i < this.list.length; i++) {
        this.openIndex.push(i.toString());
      }
      // console.log(this.openIndex)
    },

    //  ==
  },
};
</script>

<style>
.jgmenu {
  border: 1px solid #eeeeee;
}
.jgmenu .el-submenu__title {
  background: #1954a4;
  font-size: 0.225rem;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  height: 0.5rem;
  display: flex;
  align-items: center;
}

.jgsubmenu .el-submenu__icon-arrow {
  top: 48.3%;
  right: 0.6875rem;
  font-size: 0.24rem;
}

.jgsubmenu .el-submenu__title {
  padding-left: 0.32rem !important;
}

.jgsubmenu .el-submenu__title i {
  color: #ffffff;
}

.jgsubmenu .el-menu-item-group .el-menu-item {
  min-width: auto;
  padding: 0 0 0 0.375rem !important;
  background: #eeeeee;
  margin-bottom: 0.025rem;
}

.jgsubmenu .el-menu-item-group .el-menu-item:last-child {
  margin-bottom: 0 !important;
}

.jgmenu .jgsubmenu {
  margin-bottom: 0.025rem;
}

.jgmenu .jgsubmenu:last-child {
  margin-bottom: 0;
}

.jgmenu .el-menu-item-group__title {
  display: none;
}

.jgsubmenu .is-active {
  background: #bad6fb !important;
  color: #1954a4 !important;
}

.jgsubmenu .el-menu-item {
  height: 0.5rem;
  display: flex;
  align-items: center !important;
  font-size: 0.2rem;
  font-weight: 400;
}
.jgsubmenu .el-menu-item:hover {
  background: #d9e6f8;
}
.jgsubmenu .el-menu-item span {
  height: 0.5rem;
  line-height: 0.5rem;
}
.jgmenu .el-submenu__title span {
  height: 0.5rem;
  line-height: 0.5rem;
}
.jgsubmenu .el-menu-item.is-disabled {
  opacity: 0.75;
}
@media screen and (max-width: 1130px) {
  .jgsubmenu .el-submenu__icon-arrow {
    top: 55.3%;
    right: 0.3375rem;
  }
}
</style>
